<template>
    <el-button type="primary" @click="dialogVisible = true">新增bug</el-button>
    <el-table :data="tableData" style="width: 100%">
      
      <el-table-column label="用户名">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="bug新增理由">
        <template #default="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>
      <el-table-column label="开始时间">
        <template #default="scope">
          {{ scope.row.start }}
        </template>
      </el-table-column>
      <el-table-column label="类别">
        <template #default="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间">
        <template #default="scope">
          {{ scope.row.end}}
        </template>
      </el-table-column>
      <el-table-column label="附件">
        <template #default="scope">
          {{ scope.row.extend }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="新增bug" width="30%">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="bug新增理由" prop="reason">
          <el-input v-model="ruleForm.reason" />
        </el-form-item>
        
            <el-form-item label="开始时间" prop="start">
    
          <el-date-picker
        v-model="ruleForm.start"
        type="datetime"
        placeholder="请选择开始时间"
      />
        </el-form-item>
        <el-form-item label="结束时间" prop="end">
    
    <el-date-picker
  v-model="ruleForm.end"
  type="datetime"
  placeholder="请选择结束时间"
/>
  </el-form-item>
  <el-form-item label="附件" prop="extend">
    <el-input v-model="ruleForm.extend" />
 
  </el-form-item>
        <el-form-item>
           
          <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue'
  import {  developerQuery, developerAdd} from '../services/developerService'
  import type { FormInstance, FormRules } from 'element-plus'
  
  interface Developer {
    _id?: string
    username: string
   reason: string
   start: string
  end: string
   extend: string
    type: number
  }
  let dialogVisible = ref<boolean>(false) //控制显示
  const ruleFormRef = ref<FormInstance>() //表单元素
  const tableData = ref<Array<Developer>>([])
  const ruleForm = reactive({
    //数据
   reason: '',
   start:'',
   end:'',
   extend:''
  })
  const validateDate = (rule: any, value: any, callback: any) => {
    if (value.length >= 4 && value.length <= 10) {
      callback()
    } else {
      callback(new Error('长度只能是4到10位'))
    }
  }
  const rules = reactive<FormRules<typeof ruleForm>>({
    //规格
    reason: [{ validator: validateDate, trigger: 'blur' }],
    start: [{ required:true,message:"开始时间不能为空", trigger: 'blur' }],
    end: [{ required:true,message:"结束时间不能为空", trigger: 'blur' }]
  })
  
  onMounted(async () => {
    let res = await developerQuery({})
  
    tableData.value = res.data.data
  })
  
  //编辑事件
  const handleEdit = (index: number, row: Developer) => {
    console.log(index, row)
  }
  //删除事件
  const handleDelete = async (index: number, row:Developer) => {
       console.log(index, row)
     alert(row._id)

  }
  //提交
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        let res = await developerAdd({
         reason: ruleForm.reason,
          start:ruleForm. start,
          end: ruleForm.end
        })
  
        tableData.value.push(res.data.data[0])
        formEl.resetFields()
        dialogVisible.value = false
      } else {
        console.log('error submit!')
        return false
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogVisible.value = false
  }
  </script>
  